<template>
    <van-nav-bar title="找回密码" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="head">
        <label clearable class="resetphone">1.验证手机号码
        </label>
        <van-icon name="arrow" class="arrowicon" />
        <label clearable class="resetpwd">2.设置新密码
        </label>
    </div>
    <van-form>
        <div class="login">
            <van-cell-group inset>
                <van-icon name="lock" class="lockicon" />
                <van-field v-model="new_pwd" name="新密码" placeholder="请设置6-20位新的登录密码"
                    :rules="[{ required: true, message: '' }]" class="new_pwd" />
                <van-icon name="lock" class="confirm_lockicon" />
                <van-field v-model="new_confirm_pwd" name="再次新密码" placeholder="请再次输入新的登录密码"
                    :rules="[{ required: true, message: '' }]" class="new_confirm_pwd" />
            </van-cell-group>
        </div>
        <div style="margin:20px;">
            <van-button round block type="primary" native-type="submit" style="border-radius: 10px;" @click="toNext">
                登录
            </van-button>
        </div>
    </van-form>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import http from '../http';
const router = useRouter();
const route = useRoute();
let phone = route.query.phone
console.log("<<<<<", phone)
let new_pwd = ref('');
let new_confirm_pwd = ref('');

function toNext() {
    if (new_pwd.value != new_confirm_pwd.value) {
        alert('两次设置的新密码不一致')
        return;
    } else {
        const data = { new_pwd: new_pwd.value }
        http.post(`/patient/reset/${phone}/`, data).then(res => {
            if (res.data.code == 200) {
                console.log("请求成功", res.data);
                router.push('/relogin')
            } else {
                alert(res.data.msg)
            }
        }).catch(err => {
            console.log("请求失败", err);
            alert('请求失败，请稍后重试');
        })
    }
}

const onClickLeft = () => history.back();
</script>
<style scoped>
.head {
    position: relative;
    margin: 20px 20px 20px;
    height: 50px;
    border: 1px solid rgb(209, 204, 204);
}

.resetphone {
    padding: 0 30px;
}

.resetpwd {
    color: #1989fa;
}

.arrowicon {
    position: absolute;
    font-size: 67px;
    color: rgb(247, 242, 242);
    top: -7px;
    left: 43%;
}

.resetpwd {
    padding-left: 30px;
    line-height: 50px;
}

.login {
    position: relative;
    border: 1px solid rgb(230, 230, 230);
    margin: 0 20px;
}

.lockicon {
    position: absolute;
    top: 15px;
    left: 30px;
}

.confirm_lockicon {
    position: absolute;
    top: 60px;
    left: 30px;
}

.new_pwd,
.new_confirm_pwd {
    margin-left: 40px;
}
</style>